<!-- 美化和分页、筛选templates/index.html -->
{% extends 'base.html' %}
{% block content %}
<h2>商品浏览</h2>

{#添加一个搜索框#}
<form class="d-flex mb-3" method="get" action="{{ url_for('index.index') }}">
    <input class="form-control me-2" type="search" name="keyword" placeholder="搜索商品标题或描述">
    <button class="btn btn-outline-success" type="submit">搜索</button>
</form>

<form class="row mb-4" method="get">
    <div class="col">
        <select class="form-select" name="category">
            <option value="">按分类</option>
            {% for cat in categories %}
                <option value="{{ cat.id }}">{{ cat.name }}</option>
            {% endfor %}
        </select>
    </div>
    <div class="col">
        <input type="number" step="0.01" name="price_max" class="form-control" placeholder="最高价格">
    </div>
    <div class="col">
        <select class="form-select" name="condition">
            <option value="">按成色</option>
            <option value="全新">全新</option>
            <option value="九成新">九成新</option>
            <option value="八成新">八成新</option>
        </select>
    </div>
    <div class="col">
        <button type="submit" class="btn btn-primary">筛选</button>
    </div>
</form>

<div class="row">
    {% for item in goods.items %}
    <div class="col-md-4 mb-3">
        <div class="card">
            <img src="{{ item.image_url }}" class="card-img-top product-img" alt="{{ item.title }}">
            <div class="card-body">
                <h5 class="card-title">{{ item.title }}</h5>
                <p>{{ item.description[:50] }}...</p>
                <p>价格: ￥{{ item.price }} | 成色: {{ item.condition }}</p>
                <a href="/goods/detail/{{ item.id }}" class="btn btn-sm btn-outline-primary">查看详情</a>
            </div>
        </div>
    </div>
    {% endfor %}
</div>

<nav>
  <ul class="pagination">
    {% if goods.has_prev %}
      <li class="page-item"><a class="page-link" href="?page={{ goods.prev_num }}">上一页</a></li>
    {% endif %}
    <li class="page-item active"><span class="page-link">{{ goods.page }}/{{ goods.pages }}</span></li>
    {% if goods.has_next %}
      <li class="page-item"><a class="page-link" href="?page={{ goods.next_num }}">下一页</a></li>
    {% endif %}
  </ul>
</nav>
{% endblock %}